<template>
     <div class="pd20">
        <div class="flex jcsb c0">
        <div class="fwb">{{ titlemsg.title }}</div>
        <!-- <div class="fwb" @click="showChart=false">
            <van-icon name="cross" />
        </div> -->
        </div>
        <div class="flex jcsb fs12 chartTop c9">
        <div class="">{{ titlemsg.time }}</div>
        <div class="fwb">
            <span class="greenSq"></span>{{ titlemsg.tag }} <span class="c0">0</span>
        </div>
        </div>
        <div id="chart" ref="chart"></div>
    </div>
  </template>
  <style>
  @import "../ui/vant-ui/ui.css";
  @import "../public.css";
  #chart {
    width: 100%;
    height: 270px;
  }
  .chartTop {
    position: absolute;
    width: 75%;
    background-color: #f5efef;
    padding: 5px 10px;
    margin: 0 10px;
    transform: translate(0, 12px);
    z-index: 100;
  }
  .greenSq {
    display: inline-block;
    background-color: green;
    width: 6px;
    height: 6px;
    vertical-align: bottom;
    margin: 4px;
  }
  </style>

  <script>
  module.exports = {
    name: "top",
    props: ["chartdata","titlemsg"],
    mounted(){
        console.log(this.chartdata);
        this.getChart();
    },
    methods:{
        getChart() {
            console.log(this.$refs.chart);
        var myChart = echarts.init(this.$refs.chart);
        
        var option = {
          xAxis: {
            data: [
              "10.02",
              "10.03",
              "10.04",
              "10.05",
              "10.06",
              "10.07",
              "10.08",
              "10.09",
            ],
            splitLine: {
              show: true,
            },
            axisLabel: {
              interval: 0,
            },
          },
          yAxis: {
            splitLine: {
              show: true,
            },
          },
          series: [
            {
              name: "牛人新招呼",
              type: "bar",
              barWidth: "1",
              data: this.chartdata,
            },
          ],
        };
        myChart.setOption(option);
      },
    }
  };
  </script>
  